// 富文本编辑器
import React, {useState, useEffect} from 'react';
import { Editor } from "react-draft-wysiwyg";
import { convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import { EditorState, ContentState } from 'draft-js';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const NewsEditor = (props) => {
    useEffect(() => {
        const html = props.content;
        if (html === undefined) return
        const contentBlock = htmlToDraft(html);
        if (contentBlock) {
            const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
            const editorState = EditorState.createWithContent(contentState);
            seteditorState(editorState)
          }
    }, [props.content])
    const [editorState, seteditorState] = useState("")
    return (
        <div>
            <Editor 
            editorState={editorState}
            toolbarClassName="toolbarClassName"
            wrapperClassName="wrapperClassName"
            editorClassName="editorClassName"
            onEditorStateChange={editorState=>seteditorState(editorState)}
            onBlur={()=>{
                props.getContent(draftToHtml(convertToRaw(editorState.getCurrentContent())))
            }}
            />
        </div>
    );
};

export default NewsEditor;